<template>
  <div class="search-div">

      <!-- 搜索表单 -->
  <el-form label-width="70px" size="small">
    <el-form-item label="患者名称">
      <el-input v-model="queryDto.name" style="width: 120px" placeholder="姓名"></el-input>
    </el-form-item>
    <el-form-item label="SN编码">
      <el-input v-model="queryDto.snId" style="width: 120px" placeholder="SN编码"></el-input>
    </el-form-item>
      <el-form-item label="设备类型">
          <el-select v-model="queryDto.deviceType" placeholder="请选择设备">
              <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryDto.states" placeholder="请选择状态">
            <el-option v-for="item in statesList" :key="item.id" :label="item.store" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select v-model="queryDto.states" placeholder="请选择状态">
            <el-option v-for="item in statesList" :key="item.id" :label="item.inuse" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchSysRole">
          搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
    </el-form>

      <div class="tools-div">
          <!-- <el-button type="success" size="small" @click="addShow()">添 加</el-button> -->
      </div>
      
      <!--- 表格数据 -->
      <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="设备编号" />
          <el-table-column prop="snId" label="SN码" />
          <el-table-column prop="deviceName" label="设备类型" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="brandName" label="品牌" />
          <el-table-column prop="modelName" label="型号" />
          <el-table-column prop="inuse" label="库存" />
          <el-table-column prop="remark" label="备注" />
          <!-- <el-table-column prop="states" label="状态" :formatter="state"/> -->
          <el-table-column prop="store" label="状态"/>
          <el-table-column label="操作" align="center" width="280" #default="scope">
          <el-button type="success" size="small" @click="updateStart(scope.row)">启用</el-button>
          <el-button type="danger" size="small" @click="updateState(scope.row)">停用</el-button>
          <el-button type="primary" size="small" @click="editShow(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="deleteById(scope.row)">删除</el-button>
          </el-table-column>
      </el-table>

      <!--分页条-->
      <el-pagination
                  v-model:current-page="pageParams.page"
                  v-model:page-size="pageParams.limit"
                  :page-sizes="[10, 20, 50, 100]"
                  @size-change="fetchData"
                  @current-change="fetchData"
                  layout="total, sizes, prev, pager, next"
                  :total="total"
      />
      <!-- 添加角色表单对话框 -->
      <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
          <el-form label-width="120px">
              <el-form-item label="SNID">
                  <el-input v-model="equipment.snId"/>
              </el-form-item>
              <!-- <el-form-item label="启用时间">
                  <el-input type="date" v-model="equipment.createTime"/>
              </el-form-item> -->
              <el-form-item label="设备类型">
                <el-select v-model="equipment.deviceType" placeholder="请选择"  @change="device">
                  <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="品牌">
                  <el-select v-model="equipment.brandId" placeholder="请选择" ><!--:disabled="dis" -->
                    <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="型号">
                  <el-select v-model="equipment.modelId" placeholder="请选择">
                    <el-option v-for="item in modelList" :key="item.mid" :label="item.modelName" :value="item.mid">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="设备状态">
                  <el-select v-model="equipment.states" placeholder="请选择状态">
                    <el-option v-for="item in statesList" :key="item.id" :label="item.store" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>



            <!-- <el-date-picker
              v-model="equipment.createTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
              />
             <el-date-picker
              v-model="equipment.updateTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker> -->


              <el-form-item>
                  <el-button type="primary" @click="submit">提交</el-button>
                  <el-button @click="dialogVisible = false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>
</div>
</template>

<script  setup>
import { ref,onMounted } from 'vue';
import {GetStoreListByPage, updateStates, StartEquipmentById} from '@/api/equipment/stock';
import {findStore} from '@/api/equipment/states';
import {GetBrandList} from '@/api/equipment/brand';
import {GetModelList} from '@/api/equipment/model';
import {GetDeviceList} from '@/api/equipment/device';
import { ElMessage, ElMessageBox } from 'element-plus'
const defaultProps={
  children: "children",
  label: "title",
}
const dis=ref(true)

const tree=ref()
//分页条件总记录数
let total = ref(0)

//定义表格数据模型
const list = ref([])
const deviceList = ref([])
const statesList = ref([])

const brandList=ref({})
const modelList=ref({})


//分页数据
const pageParamsForm = {
  page: 1,//页码
  limit: 5, //每页记录数
}

const pageParams = ref(pageParamsForm)

//搜索表单数据
// 定义搜索表单数据模型
const queryDto = ref({
deviceName: "", 
sName: "",
snId: "",
name: "",
states: "",
store: "",
inuse: ""
})

// 搜索按钮点击事件处理函数
const searchSysRole = () => {
fetchData();
}

// 重置按钮点击事件处理函数
const resetData = () => {
  queryDto.value.deviceName = ""
  queryDto.value.deviceType = ""
  queryDto.value.sId = ""
  queryDto.value.sName = ""
  queryDto.value.snId = ""
  queryDto.value.name = ""
  queryDto.value.states = ""
  queryDto.value.store = ""
  queryDto.value.inuse = ""
fetchData();
}

// 控制对话是否展示的变量
const dialogVisible = ref(false)

//表单数据模型
const defaultForm = {
  id: "",
  sId: "",
  snId: "",
  name: "",
  deviceType: "",
  createTime: "",
  bId: "",
  states: "",
  isDeleted: "",
  deviceName: "",
  sName: "",
  brandName: "",
  modelId: "",
  modelName: "",
  store: "",
  inuse: "",
  remark: ""
  
}

const equipment = ref(defaultForm)

//钩子函数
onMounted(()=>{
  fetchData();
  fetchDataDevice();
  findBrand();
  findModel();
  GetStateslList();
})

const fetchData = async()=>{
  const {data,code,message} = await GetStoreListByPage(pageParams.value.page,pageParams.value.limit,queryDto.value);
  console.log(queryDto.value);
  list.value=data.list;
  total.value=data.total;
}

const GetStateslList = async()=>{
  const {data,code,message} = await findStore();
  statesList.value=data.list;
}

const fetchDataDevice = async()=>{
    const {data,code,message} = await GetDeviceList();
    deviceList.value=data.list;
}

const findBrand = async()=>{
  const {data,code,message} = await GetBrandList();
  brandList.value=data.list;
}

const findModel = async()=>{
  const {data,code,message} = await GetModelList();
  modelList.value=data.list;
}

// const brand = async() =>{
//       await 
// }


//进入添加
const addShow = () => {
  dialogVisible.value = true
}

//修改页面
const editShow = (row) => {
  equipment.value = row
  dialogVisible.value = true
}

//添加设备
const submit = async()=>{
  if(!equipment.value.id) {
      const { code } = await SaveEquipment(equipment.value) ;
      if(code === 200) {
          dialogVisible.value = false
          ElMessage.success('操作成功')
          fetchData()
      }
//修改设备
  }else {
      const { code } = await UpdateEquipment(equipment.value) ;
      if(code === 200) {
          dialogVisible.value = false
          ElMessage.success('操作成功')
          fetchData()
      }
  }
}

//删除设备
const deleteById = (row) => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async()=>{
     const {code } = await DeleteEquipmentById(row.id)
     if(code === 200) {
          ElMessage.success('删除成功')
          pageParams.value.page = 1
          fetchData()
     }
  })
}

//停用禁用设备
const updateStart = (row) => {
  ElMessageBox.confirm('此操作将启用该设备, 是否继续?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async()=>{
     const {code } = await updateStates(row.id)
     if(code === 200) {
          ElMessage.success('开启成功')
          pageParams.value.page = 1
          fetchData()
     }
  })
}

const updateState = (row) => {
  ElMessageBox.confirm('此操作将停用该设备, 是否继续?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async()=>{
     const {code } = await StartEquipmentById(row.id)
     if(code === 200) {
          ElMessage.success('停用成功')
          pageParams.value.page = 1
          fetchData()
     }
  })
}

// const state = (row) => {
//       return row.states === 1?"正常" :row.states === 2?"禁用":"损坏";
// }

</script>

<style scoped>

.search-div {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ebeef5;
border-radius: 3px;
background-color: #fff;
}

.tools-div {
margin: 10px 0;
padding: 10px;
border: 1px solid #ebeef5;
border-radius: 3px;
background-color: #fff;
}

</style>